<template>
    <div v-loading="vLoading" element-loading-text="拼命加载中">
        <div style="text-align: end;">
        <el-button type="primary" plain @click="stateChangeHandler(1)">已面试</el-button>
        <el-button type="primary" plain @click="stateChangeHandler(2)">已取消</el-button>
        <el-button type="primary" plain @click="stateChangeHandler(3)" >进行中</el-button>
        </div>

        <el-table :data="tableData"  border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>

            <el-table-column prop="bookingId" label="面试id" width="120">
            </el-table-column>

            <el-table-column label="日期" width="200">
                <template slot-scope="scope">{{ scope.row.interviewTime  }}</template>
            </el-table-column>
            <el-table-column prop="recruitName" label="招聘职位"  width="150" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="hrName" label="人事" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="username" label="用户" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="interviewAddress" label="地址" show-overflow-tooltip>
            </el-table-column>
            <el-table-column  label="状态" width="100" show-overflow-tooltip>
                <template slot-scope="scope">{{ {0:"未面试",1:"已面试",2:"已取消",3:"进行中"}[scope.row.interviewStatus] }}</template>
            </el-table-column>
        </el-table>
        <div class="block custom-pagination" style="text-align: center;margin-top: 10px;">
        <el-pagination :page-size="pageStrategy.pageSize" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[1, 4, 7, 10]"
                        :current-page="pageStrategy.pageNum"  :total="total" layout="sizes,prev, pager, next">
        </el-pagination>
        </div>
    </div>
</template>

<script>
import { getInterviews, updateInterviews } from '@/api/self';

export default {
    data() {
        return {
            vLoading:false,
            total:null,
            pageStrategy:{
                pageNum:1,
                pageSize:10,
            },
            tableData: [],
            selectlist: []
        }
    },

    methods: {
        handleSelectionChange(val) {
            this.selectlist = val;
        },
        stateChangeHandler(val){
            const list = []
            this.selectlist.forEach(item => item.interviewStatus=val)
            this.selectlist.forEach(item => 
            updateInterviews({"bookingId":item.bookingId,"status":val}).then(res=>{
                console.log(res);
            })
        )
        },

        handleCurrentChange(val){
            this.pageStrategy.pageNum=val
            this.query()
        },
        handleSizeChange(val){
            this.pageStrategy.pageSize=val
            this.pageStrategy.pageNum=1
            this.query()
        },
        query(){
            this.vLoading=true
            getInterviews(this.pageStrategy).then(res=>{
            this.tableData=res.data.list
            this.total=res.data.total
            this.vLoading=false
        })
        }
    },
    mounted(){
        this.query()
    }
}
</script>

<style></style>